<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="480" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw a single-headed arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Helper function to draw a double-headed arrow
    function drawDoubleArrow(ctx, fromX, fromY, toX, toY, headLength = 8) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.beginPath();
        // Line
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        // Arrowhead at (toX, toY)
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        // Arrowhead at (fromX, fromY)
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(fromX + headLength * Math.cos(angle - Math.PI / 6), fromY + headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(fromX + headLength * Math.cos(angle + Math.PI / 6), fromY + headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }


    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 1. Draw the long straight wire with current I
    const wireX = 100;
    ctx.beginPath();
    ctx.moveTo(wireX, 40);
    ctx.lineTo(wireX, 420);
    ctx.stroke();
    drawArrow(ctx, wireX, 60, wireX, 40, 10);
    ctx.fillText('I', wireX - 25, 80);

    // 2. Define and draw the triangle ABC
    const b_dist = 80;
    const a_dist = 200;
    const ab_height = 150;

    const Ax = wireX + b_dist;
    const Ay = 320;
    const Bx = Ax;
    const By = Ay - ab_height;
    const Cx = Ax + a_dist;
    const Cy = Ay;

    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Bx, By);
    ctx.lineTo(Cx, Cy);
    ctx.closePath();
    ctx.stroke();

    // 3. Add labels for vertices A, B, C
    ctx.fillText('A', Ax - 15, Ay + 15);
    ctx.fillText('B', Bx - 15, By - 15);
    ctx.fillText('C', Cx + 15, Cy + 15);

    // 4. Draw the velocity vector v
    const v_arrow_y = By + (Ay - By) * 0.4;
    const v_arrow_start_x = Cx - 40;
    const v_arrow_end_x = v_arrow_start_x + 60;
    drawArrow(ctx, v_arrow_start_x, v_arrow_y, v_arrow_end_x, v_arrow_y, 10);
    ctx.fillText('v', v_arrow_end_x + 15, v_arrow_y);

    // 5. Draw the angle theta
    ctx.beginPath();
    const angle_start = Math.atan2(By - Cy, Bx - Cx); // Angle of line CB
    const angle_end = Math.PI; // Angle of line CA (pointing left)
    ctx.arc(Cx, Cy, 40, angle_start, angle_end);
    ctx.stroke();
    ctx.fillText('θ', Cx - 45, Cy - 25);

    // 6. Draw dimension lines for a and b
    const dim_y = 360;
    const tick_height = 5;

    // Vertical ticks
    ctx.beginPath();
    ctx.moveTo(wireX, dim_y - tick_height);
    ctx.lineTo(wireX, dim_y + tick_height);
    ctx.moveTo(Ax, dim_y - tick_height);
    ctx.lineTo(Ax, dim_y + tick_height);
    ctx.moveTo(Cx, dim_y - tick_height);
    ctx.lineTo(Cx, dim_y + tick_height);
    ctx.stroke();

    // Horizontal double arrows
    drawDoubleArrow(ctx, wireX, dim_y, Ax, dim_y, 8);
    drawDoubleArrow(ctx, Ax, dim_y, Cx, dim_y, 8);
    
    // Dimension labels
    ctx.fillText('b', (wireX + Ax) / 2, dim_y - 20);
    ctx.fillText('a', (Ax + Cx) / 2, dim_y - 20);

    // 7. Add the caption text
    ctx.font = "20px 'SimSun'"; // A common font for Chinese characters
    ctx.fillText('习题 9-6 图', canvas.width / 2, 450);

</script>
</body>
</html>